<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>苏宁易购</title>
    <link rel="stylesheet" href="./css/reset.css">
    <link rel="stylesheet" href="./css/index.css">
    <link rel="stylesheet" href="./font/iconfont.css">
</head>

<body>
    <div class="top_img">
        <a href="#">
            <img src="./image/to.jpg">
        </a>
    </div>

    <div class="Navigationv banxin clearfix">
        <div class="Navigationv_right">
            <ul>
                <li id="hone">
                    <a href="#">
                        <span>网站导航</span>
                        <i class="iconfont icon-xiangxia1"></i>
                    </a>
                    <div class="big_ul" id="ul_one">
                        <div><a href="#">网站导航</a></div>
                        <div><a href="#">网站导航</a></div>
                        <div><a href="#">网站导航</a></div>
                        <div><a href="#">网站导航</a></div>
                    </div>
                </li>

                <li id="htwo">
                    <a href="#">
                        <span>商家入驻</span>
                        <i class="iconfont icon-xiangxia1"></i>
                    </a>
                    <div class="big_ul" id="ul_two">
                        <div><a href="#">商家入驻</a></div>
                        <div><a href="#">商家入驻</a></div>
                        <div><a href="#">商家入驻</a></div>
                        <div><a href="#">商家入驻</a></div>
                    </div>
                </li>

                <li id="hthr">
                    <a href="#">
                        <span>客服服务</span>
                        <i class="iconfont icon-xiangxia1"></i>
                    </a>
                    <div class="big_ul" id="ul_thr">
                        <div><a href="#">客服服务</a></div>
                        <div><a href="#">客服服务</a></div>
                        <div><a href="#">客服服务</a></div>
                        <div><a href="#">客服服务</a></div>
                    </div>
                </li>

                <li id="hfou">
                    <a href="#">
                        <span class="im"></span>
                        <span>武汉</span>
                        <i class="iconfont icon-xiangxia"></i>
                    </a>
                    <div class="big_ul" id="ul_fou">
                        <div><a href="#">上海</a></div>
                        <div><a href="#">长沙</a></div>
                        <div><a href="#">北京</a></div>
                        <div><a href="#">广东</a></div>
                    </div>
                </li>
            </ul>
        </div>

        <div class="Navigationv_left">
            <ul>
                <li>
                    <a href="">请登录</a>
                </li>

                <li>
                    <a href="">注册有礼</a>
                </li>

                <li id="li_ones">
                    <a href="#">
                        <span>我的订单</span>
                        <i class="iconfont icon-xiangxia1"></i>
                    </a>
                    <div class="ulsss" id="ul_ones">
                        <div><a href="#">我的订单</a></div>
                        <div><a href="#">我的订单</a></div>
                        <div><a href="#">我的订单</a></div>
                        <div><a href="#">我的订单</a></div>
                    </div>
                </li>

                <li id="li_twos">
                    <a href="#">
                        <span>我的易购</span>
                        <i class="iconfont icon-xiangxia1"></i>
                    </a>
                    <div class="ulsss" id="ul_twos">
                        <div><a href="#">我的易购</a></div>
                        <div><a href="#">我的易购</a></div>
                        <div><a href="#">我的易购</a></div>
                        <div><a href="#">我的易购</a></div>
                    </div>
                </li>

                <li>
                    <a href="">苏宁会员</a>
                </li>

                <li id="li_thrs">
                    <a href="#">
                        <span>购物车 0</span>
                        <i class="iconfont icon-xiangxia1"></i>
                    </a>

                    <div class="ulsss" id="ul_thrs">
                        <div><a href="#">贴身卫衣</a></div>
                        <div><a href="#">笔记本</a></div>
                        <div><a href="#">鞋子</a></div>
                        <div><a href="#">鼠标</a></div>
                    </div>
                </li>

                <li>
                    <a href="#">
                        易付宝
                    </a>
                </li>

                <li>
                    <a href="#">
                        企业采购
                    </a>
                </li>

                <li id="li_fous">
                    <a href="#">
                        <span>手机苏宁</span>
                        <i class="iconfont icon-xiangxia1"></i>
                    </a>
                    <div class="ulsss" id="ul_fous">
                        <div><a href="#">手机苏宁</a></div>
                        <div><a href="#">手机苏宁</a></div>
                        <div><a href="#">手机苏宁</a></div>
                        <div><a href="#">手机苏宁</a></div>
                    </div>
                </li>
            </ul>
        </div>
    </div>

    <!--  -->
    <div class="search banxin clearfix">
        <div class="search_img">
            <a href=""><img src="./image/logo.png"></a>
            <a href=""><img src="./image/one_gif.gif"></a>
        </div>

        <div class="search_center">
            <div class="clearfix">
                <form action="" class="clearfix">
                    <input type="text">
                    <button>搜索</button>
                </form>
                <ul class="clearfix">
                    <li><a href="">手机</a></li>
                    <li><a href="">床垫低至699</a></li>
                    <li><a href="">冰箱</a></li>
                    <li><a href="">洗发水2件5折</a></li>
                    <li><a href="">洗发水买1送1</a></li>
                    <li><a href="">电视</a></li>
                    <li><a href="">茅台</a></li>
                    <li><a href="">笔记本</a></li>
                </ul>
            </div>
        </div>
        <div class="space">
            <img src="./image/erweima.jpg" alt="">
        </div>
    </div>

    <div class="navigation banxin clearfix">
        <div class="classification">
            <a href="#">
                <i></i>
                <span>分类</span>
            </a>
        </div>

        <div class="classification_center">
            <ul>
                <li><a href="">服装城</a></li>
                <li> <a href="">苏宁超市</a></li>
                <li><a href="">红孩子母婴</a></li>
                <li><a href="#">电器城</a><i></i></li>
                <li><a href="#">大特惠</a></li>
                <li><a href="#">海外购</a></li>
                <li><a href="#">苏宁金融</a></li>
                <li><a href="#">智慧生活</a></li>
            </ul>
        </div>

        <div class="classification_right">
            <a href="#">
                <img src="./image/Notice.png">
            </a>
        </div>
    </div>

    <!-- 分类列表 -->
    <div class="list">
        <div class="list_nav banxin clearfix">
            <div class="list_left">
                <ul>
                    <li>
                        <i><img src="./image/phone.png"></i>
                        <a href="#">手机</a><em>/</em>
                        <a href="#">运营商</a><em>/</em>
                        <a href="#">智能数码</a>
                    </li>

                    <li>
                        <i><img src="./image/TV.png"></i>
                        <a href="#">家用电器</a>
                    </li>

                    <li>
                        <i><img src="./image/Kitchenware.png"></i>
                        <a href="#">厨卫</a><em>/</em>
                        <a href="#">生活家电</a><em>/</em>
                        <a href="#">厨具</a>
                    </li>

                    <li>
                        <i><img src="./image/computer.png"></i>
                        <a href="#">电脑办公</a><em>/</em>
                        <a href="#">相机</a><em>/</em>
                        <a href="#">DIY</a>
                    </li>

                    <li>
                        <i><img src="./image/sofa.png"></i>
                        <a href="#">家居</a><em>/</em>
                        <a href="#">家居</a><em>/</em>
                        <a href="#">家装</a><em>/</em>
                        <a href="#">家访</a>
                    </li>

                    <li>
                        <i><img src="./image/sugar.png"></i>
                        <a href="#">食品</a><em>/</em>
                        <a href="#">酒水</a><em>/</em>
                        <a href="#">生鲜</a><em>/</em>
                        <a href="#">特产</a>
                    </li>

                    <li>
                        <i><img src="./image/Lipstick.png"></i>
                        <a href="#">美妆</a><em>/</em>
                        <a href="#">个护</a><em>/</em>
                        <a href="#">清洁</a><em>/</em>
                        <a href="#">宠物</a>
                    </li>

                    <li>
                        <i><img src="./image/baby.png"></i>
                        <a href="#">母婴</a><em>/</em>
                        <a href="#">玩具</a><em>/</em>
                        <a href="#">车床</a><em>/</em>
                        <a href="#">童装</a>
                    </li>

                    <li>
                        <i><img src="./image/sport.png"></i>
                        <a href="#">运动</a><em>/</em>
                        <a href="#">户外</a><em>/</em>
                        <a href="#">足球</a><em>/</em>
                        <a href="#">骑行</a>
                    </li>

                    <li>
                        <i><img src="./image/girl.png"></i>
                        <a href="#">女装</a><em>/</em>
                        <a href="#">男装</a><em>/</em>
                        <a href="#">内衣</a><em>/</em>
                        <a href="#">鞋靴</a>
                    </li>

                    <li>
                        <i><img src="./image/bag.png"></i>
                        <a href="#">箱包</a><em>/</em>
                        <a href="#">钟表</a><em>/</em>
                        <a href="#">珠宝</a><em>/</em>
                        <a href="#">艺术</a>
                    </li>

                    <li>
                        <i><img src="./image/car.png"></i>
                        <a href="#">汽车</a><em>/</em>
                        <a href="#">电摩</a><em>/</em>
                        <a href="#">汽车用品</a>
                    </li>

                    <li>
                        <i><img src="./image/book.png"></i>
                        <a href="#">图书</a><em>/</em>
                        <a href="#">艺术</a><em>/</em>
                        <a href="#">原版</a><em>/</em>
                        <a href="#">文字</a>
                    </li>

                    <li>
                        <i><img src="./image/doctor.png"></i>
                        <a href="#">医药健康</a><em>/</em>
                        <a href="#">计生情趣</a>
                    </li>

                    <li>
                        <i><img src="./image/money.png"></i>
                        <a href="#">理财</a><em>/</em>
                        <a href="#">分期</a><em>/</em>
                        <a href="#">保险</a><em>/</em>
                        <a href="#">便民</a>
                    </li>

                    <div class="li_navs">
                        <div>1</div>
                        <div>2</div>
                        <div>3</div>
                        <div>4</div>
                        <div>5</div>
                        <div>6</div>
                        <div>7</div>
                        <div>8</div>
                        <div>9</div>
                        <div>10</div>
                        <div>11</div>
                        <div>12</div>
                        <div>13</div>
                        <div>14</div>
                        <div>15</div>
                    </div>
                </ul>
            </div>

            <div class="list_center">
                <ul class="Ul_one">
                    <li></li>
                    <li></li>
                    <li></li>
                    <li></li>
                    <li></li>
                    <li></li>
                    <li></li>
                    <li></li>
                </ul>

                <ul class="Ul_two">
                    <li>
                        <a href="#"><img src="./image/air conditioner.jpg" alt=""></a>
                    </li>
                    <li>
                        <a href="#"><img src="./image/paper.jpg" alt=""></a>
                    </li>
                    <li>
                        <a href="#"><img src="./image/food.jpg" alt=""></a>
                    </li>
                    <li>
                        <a href="#"><img src="./image/rice.jpg" alt=""></a>
                    </li>
                </ul>
            </div>

            <div class="list_right">
                <div class="list_right_one">
                    <ul class="list_ul_one">
                        <li>
                            <img src="./image/suning.png" alt="">
                        </li>

                        <li>
                            <p>Hi，欢迎来到苏宁易购</p>
                            <a href="#">登录</a>
                            <span>|</span>
                            <a href="#">注册</a>
                        </li>
                    </ul>

                    <ul class="list_ul_two">
                        <li>
                            <a href="#">199新人专享</a><br>
                            <a href="#">开通super尊享特权</a>
                        </li>
                    </ul>

                    <ul class="list_ul_thr">
                        <li>
                            <a href="#">
                                <img src="./image/Red envelopes.png" alt="">
                                <p>领红包</p>
                            </a>
                        </li>

                        <li>
                            <a href="#">
                                <img src="./image/Diamonds.png" alt="">
                                <p>领云钻</p>
                            </a>
                        </li>

                        <li>
                            <a href="#">
                                <img src="./image/Coupon.png" alt="">
                                <p>领取好券</p>
                            </a>
                        </li>
                    </ul>
                </div>

                <div class="list_bottom clearfix">
                    <ul>
                        <li>
                            <a href="#">
                                <img src="./image/Telephone.png" alt="">
                                <p>话费充值</p>
                            </a>
                        </li>

                        <li>
                            <a href="#">
                                <img src="./image/water.png" alt="">
                                <p>水电煤</p>
                            </a>
                        </li>

                        <li>
                            <a href="#">
                                <img src="./image/card.png" alt="">
                                <p>苏宁卡</p>
                            </a>
                        </li>

                        <li>
                            <a href="#">
                                <img src="./image/moneys.png" alt="">
                                <p>理财</p>
                            </a>
                        </li>

                        <li>
                            <a href="#">
                                <img src="./image/by stages.png" alt="">
                                <p>分期</p>
                            </a>
                        </li>

                        <li>
                            <a href="#">
                                <img src="./image/public welfare.png" alt="">
                                <p>苏宁公益</p>
                            </a>
                        </li>

                        <li>
                            <a href="#">
                                <img src="./image/fly.png" alt="">
                                <p>机票</p>
                            </a>
                        </li>

                        <li>
                            <a href="#">
                                <img src="./image/hotel.png" alt="">
                                <p>酒店</p>
                            </a>
                        </li>

                        <li>
                            <a href="#">
                                <img src="./image/Insurance.png" alt="">
                                <p>保险</p>
                            </a>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
</body>

</html>
<script src="./js/jquery.js"></script>
<script>
    $(function() {
        $("#hone").hover(function() {
            $("#ul_one").toggleClass("bigg");
        })

        $("#htwo").hover(function() {
            $("#ul_two").toggleClass("bigg");
        })


        $("#hthr").hover(function() {
            $("#ul_thr").toggleClass("bigg");
        })


        $("#hfou").hover(function() {
            $("#ul_fou").toggleClass("bigg");
        })

        $("#li_ones").hover(function() {
            $("#ul_ones").toggleClass("oness");
        })

        $("#li_twos").hover(function() {
            $("#ul_twos").toggleClass("oness");
        })


        $("#li_thrs").hover(function() {
            $("#ul_thrs").toggleClass("oness");
        })

        $("#li_fous").hover(function() {
            $("#ul_fous").toggleClass("oness");
        })

        $(".list_left ul li").mousemove(function() {
            var allindex = $(this).index();
            $(".li_navs>div").eq(allindex).css("display", "block")
        })
        $(".list_left ul li").mouseout(function() {
            var allindex = $(this).index();
            $(".li_navs>div").eq(allindex).css("display", "none");
        })
    })
</script>